<template>
  <a-layout v-if="store.state.user.isAdmin">
    <a-layout-sider width="256" style="overflow-x: hidden">
      <a-menu
        @click="handleMenuClick"
        style="width: 256px"
        v-model:openKeys="menuState.openKeys"
        v-model:selectedKeys="menuState.selectedKeys"
        mode="inline"
        theme="dark"
      >
        <a-sub-menu key="qtyw" title="前台业务">
          <a-menu-item key="ydgl">预订管理</a-menu-item>
          <a-menu-item key="rzdj">入住登记</a-menu-item>
          <a-menu-item key="rzgl">入住管理</a-menu-item>
          <a-menu-item key="lsck">流水查看</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="jcgl" title="基础管理">
          <a-menu-item key="fjgl">房间管理</a-menu-item>
          <a-menu-item key="fjlx">房间类型</a-menu-item>
          <a-menu-item key="fjlc">楼层管理</a-menu-item>
          <a-menu-item key="bqgl">标签管理</a-menu-item>
          <a-menu-item key="yjgl">押金管理</a-menu-item>
          <a-menu-item key="dtzk">动态折扣</a-menu-item>
          <a-menu-item key="tcgl">套餐管理</a-menu-item>
          <a-menu-item key="yhgl">用户管理</a-menu-item>
          <a-menu-item key="yggl">员工管理</a-menu-item>
          <a-menu-item key="vipgl">vip管理</a-menu-item>
          <a-menu-item key="vippp">vip匹配</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="kcgl" title="库存管理">
          <a-menu-item key="spgl">商品管理</a-menu-item>
          <a-menu-item key="gysgl">供应商管理</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <div style="margin: 20px" class="content">
        <router-view></router-view>
      </div>
    </a-layout>
  </a-layout>
  <a-layout v-else>
    <tcglguest></tcglguest>
  </a-layout>
</template>
<script lang="ts">
import { reactive } from "vue";

function getMenuUse() {
  const menuState = reactive({
    openKeys: [],
    selectedKeys: [],
  });
  return menuState;
}
</script>
<script lang="ts" setup>
import tcglguest from "../guest/tcglguest.vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const menuState = getMenuUse();

const $router = useRouter();
const handleMenuClick = ({ key }) =>
  $router.push({
    name: key,
  });
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0px;
}
.content {
  ::-webkit-scrollbar {
    width: 0px;
  }
  :deep(.card:not(:first-child)) {
    margin-top: 20px;
  }
  :deep(.card100) {
    flex: 1;
    overflow-y: auto;
  }
  :deep(.cardflex) {
    display: flex;
    flex-flow: column nowrap;
  }
  & > div {
    height: 100%;
  }
  height: 100%;
  :deep(.card) {
    background-color: white;
    padding: 20px;
  }
}
</style>
<style></style>
